<template>
  <div class="container-register">
    <div v-show="!confirmView">
      <!--      <div class="steps">-->
      <!--        <el-steps :active="active" align-center>-->
      <!--          <el-step title="填写个人信息" />-->
      <!--          <el-step title="填写企业信息" />-->
      <!--        </el-steps>-->
      <!--      </div>-->
      <!--  <div v-if="active == 0" v-loading="loading" class="view">
        <div class="title">
          <h2>填写个人信息</h2>
          <h3>
            通过身份证验证您的身份，同时您的信息将会得到绝对的保护，仅限用于招聘
          </h3>
        </div>

        <div class="form form-personal">
          <el-form
            ref="personalForm"
            :model="personalForm"
            :rules="personalFormRules"
            label-position="right"
            label-width="130px"
          >
            <el-form-item label="姓名：" required prop="name">
              <el-input v-model="personalForm.name" />
            </el-form-item>
            <el-form-item label="身份证号："  prop="idNumber">
              <el-input v-model="personalForm.idNumber" />
            </el-form-item>
            <el-form-item
              label="上传身份证照片："

              prop="positiveFileid"
            >
              <div class="upload-card-group">
                <div class="item">
                  <el-upload
                    v-loading="positiveFile.loading"
                    accept=".jpg,.png,.jpeg"
                    action="#"
                    :multiple="false"
                    :data="{'type': 1,'biz':'private/ent/' + new Date().getFullYear() + '/' + parseInt(new Date().getMonth() + 1)}"
                    :show-file-list="false"
                    :http-request="uploadCardImg"
                    list-type="picture-card"
                  >
                    <img
                      v-if="positiveFile.url"
                      class="id-card-img"
                      :src="positiveFile.url"
                      alt=""
                    >
                    <template v-else>
                      <img src="../../assets/images/card1.png">
                      <div class="el-upload__text">上传身份证背国徽面</div>
                    </template>
                  </el-upload>
                </div>
                <div class="item">
                  <el-upload
                    v-loading="backFile.loading"
                    accept=".jpg,.png,.jpeg"
                    action="#"
                    :multiple="false"
                    :show-file-list="false"
                    :data="{'type': 2,'biz':'private/ent/' + new Date().getFullYear() + '/' + parseInt(new Date().getMonth() + 1)}"
                    :http-request="uploadCardImg"
                    list-type="picture-card"
                  >
                    <img
                      v-if="backFile.url"
                      class="id-card-img"
                      :src="backFile.url"
                      alt=""
                    >
                    <template v-else>
                      <img src="../../assets/images/card2.png">
                      <div class="el-upload__text">上传身份证头像面</div>
                    </template>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <div class="button-group">
            <span @click="submitPersonalForm">下一步</span>
          </div>
        </div>
      </div>
      v-else
 -->
      <div v-loading="loading" class="view">
        <div class="title">
          <h2>填写企业信息</h2>
        </div>
        <div class="form form-enterprise">
          <el-form
            ref="enterpriseForm"
            :model="enterpriseForm"
            :rules="enterpriseFormRules"
            label-position="right"
            label-width="120px"
          >
            <el-form-item label="企业logo：" prop="enLogo">
              <div class="upload">
                <!-- <el-upload
                  accept=".jpg,.png,.jpeg"
                  action="#"
                  :multiple="false"
                  :show-file-list="false"
                  :data="{ type: 3 }"
                  :http-request="uploadCardImg"
                  list-type="picture-card"
                >
                  <img
                    v-if="logoFile.url"
                    class="id-card-img"
                    :src="logoFile.url"
                    alt=""
                  >
                  <i
                    v-else
                    :class="
                      logoFile.loading ? 'el-icon-loading' : 'el-icon-plus'
                    "
                  />
                </el-upload> -->
                <!-- :auto-crop-width="bannerWidth" -->
                <!-- :style="" -->
                <upload-cropper
                  ref="uploadCropper"
                  class="wrap"
                  :return-obj="true"
                  :enlarge="2"
                  :init-img="logoFile.url"
                  :tip-content="'只支持JPG格式,建议使用大小不要超过1000k、350*150像素的图片'"
                  :fixed-number="[350,150]"
                  @upload="getUploadImgId"
                />
                <div class="explain">
                  <p>上传logo请小于300KB</p>
                  <p>尺寸：350px*150px</p>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="联系人姓名：" prop="personalName">
              <el-input v-model="enterpriseForm.personalName" />
            </el-form-item>
            <el-form-item label="联系人邮箱：" prop="personalEmail">
              <el-input v-model="enterpriseForm.personalEmail" />
            </el-form-item>
            <el-form-item label="企业名称：" required prop="enName">
              <el-input
                v-model="enterpriseForm.enName"
                placeholder="请输入企业名称"
              />
            </el-form-item>
            <el-form-item label="所属专场：">
              <el-select v-model="enterpriseForm.affUnit" clearable placeholder="请选择">
                <el-option
                  v-for="item in deptOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业所在地： " required prop="location">
              <el-cascader
                ref="cascader"
                v-model="enterpriseForm.location"
                style="width: 100%"
                :options="areaData"
                @change="areaDataChange"
              />
            </el-form-item>

            <!--            <el-form-item label="详细地址：" required prop="enLocation">
              <el-col :span="18">
                <el-input v-model="enterpriseForm.enLocation" placeholder="请输入详细地址" />
              </el-col>
              <el-col :span="6" class="pl30">
                <el-button
                  icon="el-icon-location"
                  @click="graspLongLat"
                />
              </el-col>
            </el-form-item>-->
            <el-form-item label="详细地址：" required prop="enLocation">
              <el-input v-model="enterpriseForm.enLocation" placeholder="请输入详细地址" />
            </el-form-item>

            <el-form-item label="所属行业：" required prop="enTrade">
              <el-cascader
                ref="tradeDataCascader"
                v-model="enterpriseForm.enTrade"
                style="width: 100%"
                :show-all-levels="false"
                :options="tradeData"
                filterable
                @change="tradeDataChange"
              />
            </el-form-item>
            <el-form-item label="企业性质：" required prop="enNature">
              <el-select v-model="enterpriseForm.enNature" clearable placeholder="请选择">
                <el-option
                  v-for="item in enNature"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="企业邮箱：" required prop="enMail">
              <el-input v-model="enterpriseForm.enMail"></el-input>
            </el-form-item> -->
            <el-form-item label="层级：" required prop="enGrade">
              <el-select v-model="enterpriseForm.enGrade" clearable placeholder="请选择">
                <el-option
                  v-for="item in enGradeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
                <!-- <el-option label="无" value="0" />
                <el-option label="专精特新中小企业" value="1" />
                <el-option label="专精特新“小巨人”企业" value="2" /> -->
              </el-select>
            </el-form-item>

            <el-form-item label="其他福利：" prop="otherWelfare">
              <el-checkbox-group v-model="enterpriseForm.otherWelfare">
                <el-checkbox label="五险一金" border>五险一金</el-checkbox>
                <el-checkbox label="带薪年假" border>带薪年假</el-checkbox>
                <el-checkbox label="定期体检" border>定期体检</el-checkbox>
                <el-checkbox label="员工旅游" border>员工旅游</el-checkbox>
                <el-checkbox label="节日福利" border>节日福利</el-checkbox>
                <el-checkbox label="餐补" border>餐补</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="企业介绍" prop="introduce">
              <el-input
                v-model="enterpriseForm.introduce"
                type="textarea"
                :rows="8"
                :maxlength="200"
                placeholder="请输入内容"
                show-word-limit
              />
            </el-form-item>

            <el-form-item label="对公账户：">
              <el-input v-model="enterpriseForm.account" />
            </el-form-item>
            <el-form-item label="开户行全称：">
              <el-input v-model="enterpriseForm.bankName" />
            </el-form-item>
            <el-form-item label="上传营业执照：" required prop="license">
              <div class="upload-wrap">
                <el-upload
                  ref="uploadLicense"
                  accept=".jpg,.png,.jpeg"
                  :class="[fileList.length>=5?'hidBtn':'']"
                  list-type="picture-card"
                  :action="$uploadUrl"
                  :data="{'biz':'private/ent/' + new Date().getFullYear() + '/' + parseInt(new Date().getMonth() + 1)}"
                  :headers="{ 'X-Access-Token': token }"
                  :on-success="licenseSuccess"
                  :on-remove="licenseRemove"
                  :limit="5"
                  :file-list="fileList"
                >
                  <i class="el-icon-plus uploader-item-icon" />
                </el-upload>
                <p class="tips">
                  请上传营业执照照片({{ fileList.length
                  }}/5)<span
                    class="el-link el-button--text ml10"
                    @click="tipsdialogShow"
                  >查看上传示例</span>
                </p>
              </div>
            </el-form-item>
          </el-form>
          <div class="button-group">
            <!-- <span class="primary" @click="backStep()">返回上一步</span> -->
            <span @click="submitEnterpriseForm">提交审核</span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="注册信息核对"
      :visible.sync="confirmView"
      width="980px"
      top="80px"
      custom-class="register-confirm-dialog"
      :before-close="confirmViewClose"
    >
      <div v-loading="loading" class="dialog-content">
        <!--
        <div class="title">
          <span class="icon" />
          <span>个人信息</span>
        </div>
        <div class="info">
          <div class="item"> 2020年12月30日19:20:17  按照客户要求移动到了 企业信息下
            <span class="item-title">姓名：</span>
            <span>{{ personalForm.name }}</span>
          </div>
          <div class="item">
            <span class="item-title">身份证号：</span>
            <span>{{ personalForm.idNumber }}</span>
          </div>
          <div class="item">
            <span class="item-title">上传身份证照片：</span>
            <div class="card-group">
              <div class="card-img">
                <img :src="positiveFile.url" alt="">
              </div>
              <div class="card-img">
                <img :src="backFile.url" alt="">
              </div>
            </div>
          </div>
        </div> -->
        <!--
      <div class="title title-enterprise">
        <span class="icon" />
        <span>企业信息</span>
      </div>
      -->
        <div class="info info-enterprise">
          <div class="item item-logo">
            <span class="item-title">企业logo：</span>
            <div class="logo">
              <img :src="logoFile.url" alt="">
            </div>
          </div>
          <div class="item">
            <span class="item-title">联系人：</span>
            <span>{{ enterpriseForm.personalName }}</span>
          </div>
          <div class="item">
            <span class="item-title">联系人邮箱：</span>
            <span>{{ enterpriseForm.personalEmail }}</span>
          </div>
          <div class="item">
            <span class="item-title">企业名称：</span>
            <span>{{ enterpriseForm.enName }}</span>
          </div>
          <div class="item">
            <span class="item-title">所属专场：</span>
            <span>{{ getDeptText(enterpriseForm.affUnit) }}</span>
          </div>
          <div class="item">
            <span class="item-title">企业所在地：</span>
            <span>{{ enterpriseForm.enAddress_dictText }}</span>
          </div>
          <div class="item">
            <span class="item-title">所属行业：</span>
            <span>{{ enterpriseForm.enTrade_dictText }}</span>
          </div>
          <div class="item">
            <span class="item-title">企业性质：</span>
            <span>{{ enterpriseForm.enNature }}</span>
          </div>
          <div class="item">
            <span class="item-title">层级：</span>
            <span>{{ getEnGradeText(enterpriseForm.enGrade) }}</span>
          </div>

          <div class="item">
            <span class="item-title">其他福利：</span>
            <span>{{ enterpriseForm.otherWelfare.join() }}</span>
          </div>
          <div class="item">
            <span class="item-title">企业介绍：</span>
            <span>{{ enterpriseForm.introduce }}</span>
          </div>
          <div class="item">
            <span class="item-title">对公账户：</span>
            <span>{{ enterpriseForm.account }}</span>
          </div>
          <div class="item">
            <span class="item-title">开户行全称：</span>
            <span>{{ enterpriseForm.bankName }}</span>
          </div>
          <div class="item">
            <span class="item-title">上传营业执照：</span>
            <div v-if="fileList.length > 0" class="license-list">
              <div
                v-for="(item, index) in fileList"
                :key="index"
                class="license"
              >
                <img :src="item.url" alt="">
              </div>

            </div>
          </div>
        </div>
        <div class="button-group">
          <span
            class="primary"
            @click="
              confirmView = false;
              active = 2;
            "
          >返回修改</span>
          <span @click="submitConfirm">确认提交</span>
        </div>
      </div>
    </el-dialog>

    <!--营业执照示例图-->
    <el-dialog :visible.sync="tipsdialogVisible" width="360px">
      <el-image
        style="width: 320px; height: 220px"
        :src="require('@/assets/images/business-license.png')"
        :preview-src-list="[require('@/assets/images/business-license.png')]"
      />
      <!-- <img src="../../../assets/images/business-license.png"> -->
      <div class="tips-content">
        <p>注意事项</p>
        <p>1.企业名称与企业证件信息必须一致；</p>
        <p>2.营业执照有效期大于15天；</p>
        <p>3.营业执照政府章与工商局登记机关信息一致；</p>
        <p>4.复印版证照需加盖企业红色公章，签章需清晰可见；</p>
        <p>5.证件完整，清晰，有效，不能为电子版或截屏。</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tipsdialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--    <map-dialog ref="mapDialog" @returnInfo="getMapInfo" />-->
  </div>
</template>

<script>
import {
  registerPcInfo,
  registerComInfo,
  // registerStep,
  // registerComInfoEdit,
  // registerConfigInfo
  registerComInfoV2,
  registerComInfoEdit
} from '@/api/user'
import uploadCropper from '@/components/uploadCropper'
import { uploadFile, sign } from '@/api/common'
import { mapState } from 'vuex'
import store from '@/store'
// import mapDialog from '@/components/CurriculumVitaeEditDrawer/components/mapDialog'
export default {
  name: 'Register',
  components: { /* mapDialog,*/ uploadCropper },
  props: {},
  data() {
    // var validateCardImg = (rule, value, callback) => {
    //   if (!this.personalForm.positiveFileid || !this.personalForm.backFileid) {
    //     callback(new Error('请上传完整身份证信息'))
    //   } else {
    //     callback()
    //   }
    // }
    /* var validateLatLong = (rule, value, callback) => {
      if (!this.enterpriseForm.lng) {
        callback(new Error('请点击选择经纬度'))
      }
      callback()
    }*/
    return {
      // tipsdialogVisible: false,
      loading: false,
      active: 2,
      licenseList: [],
      positiveFile: {
        url: '',
        loading: false
      }, // 身份证展示信息 正面
      backFile: {
        url: '',
        loading: false
      }, // 身份证展示信息 背面
      logoFile: {
        url: '',
        loading: false
      }, // logo
      personalForm: {
        name: '',
        idNumber: '',
        positiveFileid: '',
        backFileid: ''
      },
      mapInfoCity: {
        label: '',
        center: ''
      },
      // personalFormRules: {
      //   name: [{ required: true, message: '请输入姓名' }],
      //   idNumber: [
      //    // { required: true, message: '请输入身份证号' },
      //     {
      //       min: 18,
      //       max: 18,
      //       message: '请填写18位身份证号',
      //       trigger: 'blur'
      //     }
      //   ]
      //   //positiveFileid: [{ validator: validateCardImg }] //2020年12月29日11:50:02 客户要求不强迫要求身份证号码、及图片
      // },
      enterpriseForm: {
        id: '',
        actFlag: true, // 自己注册的
        state: 1,
        enLogo: '',
        enName: '',
        personalName: '',
        personalEmail: '',
        location: [],
        enLocation: '', // 详细地址
        lng: '',
        lat: '',
        enTrade: [],
        enNature: '',
        enGrade: '',
        // enMail: "",
        account: '',
        bankName: '',
        license: '',
        otherWelfare: []
      },
      enterpriseFormRules: {
        personalName: [{ required: true, message: '请输入联系人' }],
        personalEmail: [
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请填写正确的邮箱', trigger: 'blur' }
        ],
        enLogo: [
          { required: true, message: '请上传企业LOGO' }
        ],
        enName: [{ required: true, message: '请输入企业名称' }],
        location: [{ required: true, message: '请选择企业所在地' }],
        enTrade: [{ required: true, message: '请选择所属行业' }],
        enNature: [{ required: true, message: '请选择企业性质' }],
        // enMail: [{ required: true, message: "请输入企业邮箱" }],
        license: [{ required: true, message: '请上传营业执照' }],
        enLocation: [
          { required: true, message: '请输入详细地址' }/*,
          { validator: validateLatLong }*/
        ],
        enGrade: [
          { required: true, message: '请选择层级' }
        ],
        otherWelfare: [
          { required: true, message: '请选择其他福利' }
        ],
        introduce: [
          { required: true, message: '请输入企业介绍' }
        ]
      },
      confirmView: false, // 确认弹窗
      areaData: [],
      tradeData: [],
      tipsdialogVisible: false, // 营业执照弹窗
      fileList: [],
      enGradeOptions: [
        { label: '无', value: '0' },
        { label: '专精特新中小企业', value: '1' },
        { label: '专精特新“小巨人”企业', value: '2' }
      ],
      deptOptions: [
        { label: '无', value: '0' },
        { label: '河南省工信厅', value: 'gxt' }
      ],
      otherWelfareList: ['带薪年假', '定期体检', '员工旅游', '节日福利', '餐补']
    }
  },
  computed: {
    ...mapState({
      enNature: (state) => state.app.enNature,
      token: (state) => state.user.token
    })
  },
  async created() {
    const companyInfo = this.$store.getters.companyInfo
    if (companyInfo) {
      const enInfo = companyInfo.enInfo
      const arr = Object.keys(this.enterpriseForm)
      arr.forEach(item => {
        if (enInfo[item] || parseFloat(enInfo[item]) === 0) {
          this.enterpriseForm[item] = enInfo[item]
        }
      })
      this.enterpriseForm.personalName = enInfo.piInfo.name || enInfo.piInfo.nickName
      this.enterpriseForm.personalEmail = enInfo.piInfo.email
      this.enterpriseForm.location = enInfo.enAddress
      this.logoFile = {
        url: enInfo.enLogo_dictText,
        loading: false
      }
      const ls = enInfo.license.split(',')
      const lds = enInfo.license_dictText.split(',')
      // 营业执照
      this.fileList = []
      ls.forEach((item, index) => {
        sign({ fileId: item }).then(res => {
          this.fileList.push({ fileId: item, url: lds[index] + '?sign=' + res.result })
        })
      })
      console.log(this.fileList, this.enterpriseForm)
    }
    /**
    registerStep().then((res) => {

      const enInfo = res.result.enInfo

      const piInfo = res.result.piInfo
      if (piInfo) {
        this.personalForm = {
			    id: piInfo.id,
          name: piInfo.name,
          idNumber: piInfo.idNumber,
          positiveFileid: '',
          backFileid: '',
          positiveFileid: piInfo.positiveFileid,
          backFileid: piInfo.backFileid
        }
        if (piInfo.positiveFileid_dictText) {
          // 身份证正面 国徽面
          sign({ fileId: piInfo.positiveFileid }).then((res) => {
            this.positiveFile.url =
              piInfo.positiveFileid_dictText + '?sign=' + res.result
          })
        }
        if (piInfo.backFileid_dictText) {
          // 身份证反面 人像面
          sign({ fileId: piInfo.backFileid }).then((res) => {
            this.backFile.url =
              piInfo.backFileid_dictText + '?sign=' + res.result
          })
        }
      }

      this.$nextTick(() => {
        if (this.$refs.enterpriseForm) {
          this.$refs.enterpriseForm.clearValidate()
        }
        if (this.$refs.personalForm) {
          this.$refs.personalForm.clearValidate()
        }
      })
    }) ******/

    if (this.$store.state.app.areaData.length === 0) {
      const res = await store.dispatch('app/getArea', 'area')
      this.areaData = res.result
    } else {
      this.areaData = this.$store.state.app.areaData
    }

    // 行业数据
    if (this.$store.state.app.tradeData.length === 0) {
      const res = await store.dispatch('app/getTrade', 'industry')
      this.tradeData = res.result
    } else {
      this.tradeData = this.$store.state.app.tradeData
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    getEnGradeText(enGrade) {
      const items = this.enGradeOptions.filter(item => {
        return item.value === enGrade
      })
      return items[0]?.label
    },
    getUploadImgId(e) {
      this.enterpriseForm.enLogo = e.fileId
      this.logoFile = {
        url: e.url,
        loading: false
      }
      this.$refs.enterpriseForm.clearValidate('enLogo')
    },
    getDeptText(dept) {
      const items = this.deptOptions.filter(item => {
        return item.value === dept
      })
      return items[0]?.label
    },
    // 所属行业选择
    tradeDataChange() {
      const data = this.$refs.tradeDataCascader.getCheckedNodes()
      this.enterpriseForm.enTrade_dictText = data[0].pathLabels.join('/')
    },
    // 地址选择
    areaDataChange() {
      const data = this.$refs.cascader.getCheckedNodes()
      this.enterpriseForm.enAddress_dictText = data[0].pathLabels.join('/')
      this.mapInfoCity = {
        label: data[0].parent.data.label,
        center: data[0].parent.data.center
      }
      //  this.enterpriseForm.enLocation = '';
      //  this.enterpriseForm.lng = '';
      // this.enterpriseForm.lat = '';
    },
    // 打开经纬度
    /* graspLongLat() {
      this.$refs.enterpriseForm.validateField(['location'], (valid) => {
        if (valid) return
        this.$refs.mapDialog.show(this.mapInfoCity)
      })
    },*/
    // 获取地图信息
    /* getMapInfo(arr, address) {
      this.enterpriseForm.lng = arr[0]
      this.enterpriseForm.lat = arr[1]
      if (address) {
        this.enterpriseForm.enLocation = address
      }
      this.$refs.enterpriseForm.clearValidate('location')
    },*/
    submitConfirm() { // 注册企业信息
      this.loading = true
      const form = JSON.parse(JSON.stringify(this.enterpriseForm))
      form.province = form.location[0]
      form.city = form.location[1]
      form.enAddress = form.location.join(',')
      form.enTrade = form.enTrade.join(',')
      form.otherWelfare = form.otherWelfare.join(',')
      if (form.id) {
        registerComInfoEdit(form).then((res) => {
          store.dispatch('user/resetToken').then(() => {
            this.loading = false
            this.$confirm('企业信息已提交，请等待审核', '提示', {
              confirmButtonText: '确定',
              showClose: false,
              showCancelButton: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              type: 'success'
            }).then(() => {
              location.reload()
            })
          })
        }).catch(res => {
          this.loading = false
        })
      } else {
        registerComInfoV2(form).then((res) => {
          store.dispatch('user/resetToken').then(() => {
            this.loading = false
            this.$confirm('企业信息已提交，请等待审核', '提示', {
              confirmButtonText: '确定',
              showClose: false,
              showCancelButton: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              type: 'success'
            }).then(() => {
              location.reload()
            })
          })
        }).catch(res => {
          this.loading = false
        })
      }
    },

    tipsdialogShow() {
      this.tipsdialogVisible = true
    },
    licenseSuccess(res, file, fileList) {
      // console.log(res)
      // console.log(file)
      // fileList[fileList.length - 1].url = window.URL.createObjectURL(file.raw)
      console.log(fileList)
      this.fileList = fileList
      this.$refs.enterpriseForm.clearValidate('license')
      this.licenseRemove(file, fileList)
    },
    licenseRemove(file, fileList) {
      const licenses = []
      this.fileList = fileList
      fileList.forEach((item) => {
        console.log(item)
        if (item.response && item.response.result) {
          licenses.push(item.response.result.fileId)
        }
        if (item.fileId) {
          licenses.push(item.fileId)
        }
      })
      this.enterpriseForm.license = licenses.join(',')
    },
    uploadCardImg(e) {
      if (e.file.type.indexOf('image/') == -1) {
        this.$message.error('请上传图片格式文件')
      } else {
        switch (e.data.type) {
          case 1:
            this.positiveFile.loading = true
            break
          case 2:
            this.backFile.loading = true
            break
          case 3:
            this.logoFile.loading = true
            break
          default:
            break
        }
        const formData = new FormData()
        formData.append('file', e.file)
        const date = new Date()
        if (e.data.type != 3) {
          formData.append('biz', 'private/user/' + date.getFullYear() + '/' + parseInt(date.getMonth() + 1))
        } else {
          formData.append('biz', 'public/ent/' + date.getFullYear() + '/' + parseInt(date.getMonth() + 1))
        }

        uploadFile(formData).then((res) => {
          console.log(res)
          switch (e.data.type) {
            case 1:
              this.personalForm.positiveFileid = res.result.fileId
              this.positiveFile = {
                url: window.URL.createObjectURL(e.file),
                loading: false
              }
              break
            case 2:
              this.personalForm.backFileid = res.result.fileId
              this.backFile = {
                url: window.URL.createObjectURL(e.file),
                loading: false
              }
              break
              // case 3:
              //   this.enterpriseForm.enLogo = res.result.fileId
              //   this.$refs.enterpriseForm.clearValidate('enLogo')
              //   this.logoFile = {
              //     url: window.URL.createObjectURL(e.file),
              //     loading: false
              //   }
              //   break

            default:
              break
          }
        })
      }
    },
    // 提交个人信息
    // submitPersonalForm() {//客户暂时不需要了
    //   this.$refs.personalForm.validate((valid) => {
    //     if (valid) {
    //       this.loading = true
    //       registerPcInfo(this.personalForm).then(res => {
    //         this.loading = false
    //         this.active = 2
    //         this.personalForm.id = res.message
    //         this.$nextTick(() => {
    //           if (this.$refs.enterpriseForm) {
    //             this.$refs.enterpriseForm.clearValidate()
    //           }
    //           if (this.$refs.personalForm) {
    //             this.$refs.personalForm.clearValidate()
    //           }
    //         })
    //       })
    //     } else {
    //       return false
    //     }
    //   })
    // },
    // 提交企业端信息 打开确认弹窗
    submitEnterpriseForm() {
      this.$refs.enterpriseForm.validate((valid) => {
        if (valid) {
          this.confirmView = true
        } else {
          return false
        }
      })
    },
    showConfirmView() {

      // registerStep().then(res => {
      //   console.log(res)
      //   let data = res.result.enInfo;
      //   this.enterpriseForm.location = data.enAddress.split(",");
      //   this.enterpriseForm.enTrade = data.enTrade.split(",");
      //   this.confirmView = true;
      //   // this.enterpriseForm = data;
      //   // this.enterpriseForm.enAddress_dictText = res.result.enAddress_dictText;
      //   //  const ls = res.result.enInfo.license.split(",");
      //   // const lds = res.result.enInfo.license_dictText.split(",");
      //   // this.fileList = [];
      //   // // 营业执照
      //   // ls.forEach((item, index) => {
      //   //   sign({ fileId: item }).then((res) => {
      //   //     const obj = new Object();
      //   //     obj.url = lds[index] + "?sign=" + res.result;
      //   //     obj.fileId = item;
      //   //     this.fileList.push(obj);
      //   //   });
      //   // });

      // })

    },
    // 下一步
    nextStep() {
      if (this.active < 2) {
        this.active = this.active + 1
      }
    },
    // 上一步
    backStep() {
      this.active = 0
      this.$nextTick(() => {
        if (this.$refs.enterpriseForm) {
          this.$refs.enterpriseForm.clearValidate()
        }
        if (this.$refs.personalForm) {
          this.$refs.personalForm.clearValidate()
        }
      })
    },
    confirmViewClose() {
      this.confirmView = false
      this.active = 2
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-wrap{
    .hidBtn{
      ::after{
        display: block;
        content: "";
        clear: both;
      }
      ::v-deep .el-upload--picture-card{
        display:none;   /* 上传按钮隐藏 */
      }
    }
    .el-upload-list--picture-card::after{
      display: block;
      content: "";
      clear: both;
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item{
      width: 100px;
      height: 100px;
      float: left;
      line-height: 98px;
      position: relative;
      .el-progress-circle{
        display: none !important;
      }
    }
    .uploader-item{
      width: 100px;
      height: 100px;
    }
    ::v-deep .el-upload{
      width: 100px;
      height: 100px;
      border: 1px dashed #d9d9d9;
      cursor: pointer;
      position: relative;
      border-radius: 6px;
      background: none;
      .uploader-item-icon {
        display: block;
        font-size: 28px;
        color: #8c939d;
        width: 98px;
        height: 98px;
        line-height: 98px;
        text-align: center;
      }
    }
    .tips{
      margin: 0;
      margin-top: 10px;
      line-height: 24px;
    }
  }
</style>
<style lang="scss">
html {
  background: #f6f6f6;
}
.container-register {
  height: 100%;
  .button-group {
    margin-left: 118px;
    span {
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      width: 160px;
      display: inline-block;
      background: #348ce8;
      border-radius: 3px;
      line-height: 44px;
      cursor: pointer;
      margin-right: 30px;
    }
    span:last-child {
      margin-right: 0;
    }
    .primary {
      background: #fff;
      color: #666666;
      border: 1px solid #e6e6e6;
    }
  }
  .steps {
    width: 1000px;
    margin: auto;
    padding: 0 294px;
    padding-top: 62px;
  }
  .view {
    width: 1000px;
    margin: 40px auto;
    background: #fff;
    .title {
      padding-top: 54px;
      padding-left: 96px;
      h2 {
        font-size: 20px;
        color: #000000;
        margin: 0;
      }
      h3 {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin: 0;
        margin-top: 10px;
      }
    }
    .form {
      .el-form-item__label {
        padding: 0;
        font-weight: 400;
        color: #666666;
      }

      .button-group {
        margin-left: 118px;
      }
    }
    .form-personal {
      padding: 65px 286px 194px 239px;
      .upload-card-group {
        display: flex;
        justify-content: space-between;
        .item {
          float: left;
          .el-upload--picture-card {
            width: 170px;
            height: 120px;
            background: #efefef;
            line-height: 0;
            img {
              margin-top: 20px;
              margin-bottom: 10px;
            }
            .el-upload__text {
              font-size: 14px;
              font-weight: 400;
              line-height: 60px;
              color: #666666;
              line-height: 14px;
            }
          }
          .id-card-img {
            padding: 2px;
            margin: 0 !important;
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
      }
    }
    .form-enterprise {
      padding-top: 35px;
      padding-left: 185px;
      padding-right: 332px;
      padding-bottom: 38px;
      .el-select {
        width: 100%;
      }
      .upload-number-text {
        margin-top: -14px;
        font-size: 14px;
        font-weight: 400;
        line-height: 28px;
        color: #666666;
        .see-examples {
          color: #348ce8;
          margin-left: 15px;
          cursor: pointer;
        }
      }
      .upload {
        display: flex;
        align-items: center;
        .el-upload--picture-card {
          width: 90px;
          height: 90px;
          line-height: 90px;
        }
        .wrap .el-upload--picture-card{
          width: 175px;
          height: 75px;
          line-height: 73px;
        }
        img {
          width: 100%;
          height: 100%;
          padding: 2px;
        }
        p {
          font-size: 12px;
          font-weight: 400;
          line-height: 24px;
          color: #666666;
          margin-left: 10px;
        }
      }
    }
  }
  .register-confirm-dialog {
    margin-bottom: 63px;
    .el-dialog__body {
      padding: 0;
      border-top: 1px solid #ececec;
    }
    .dialog-content {
      margin: 20px 40px;
      display: inline-block;
      .title {
        font-size: 16px;
        font-weight: bold;
        line-height: 21px;
        color: #333333;
        display: flex;
        align-items: center;
        .icon {
          width: 4px;
          height: 16px;
          background: #348ce8;
          display: inline-block;
          margin-right: 15px;
        }
      }
      .title-enterprise {
        margin-top: 30px;
      }
      .info-enterprise {
        margin-top: 18px !important;
      }
      .info {
        margin-top: 40px;
        margin-left: 249px;
        display: inline-block;
        .item {
          font-size: 14px;
          font-weight: 400;
          line-height: 40px;
          color: #666666;
          .item-title {
            width: 120px;
            display: inline-block;
            text-align: right;
            margin-right: 8px;
          }
          .card-group {
            float: right;
            display: flex;
            .card-img {
            img{
                width: 100%;
                height: 100%;
            }
              display: flex;
              align-items: center;
              justify-content: center;
              width: 170px;
              height: 100px;
              background-color: #efefef;
              margin-right: 17px;
            }
            .card-img:last-child {
              margin-right: 0;
            }
          }
          .logo {
            width: 175px;
            height: 75px;
            img{
                width: 100%;
                height: 100%;
            }
          }
          .license-list{
            float: right;
            .license {
            width: 170px;
            height: 100px;
            background-color: #efefef;
            float: left;
            margin: 5px;
            img{
                width: 100%;
                height: 100%;
            }
          }
          }

        }
        .item-logo {
          display: flex;
          align-items: center;
        }
      }
      .button-group {
        margin-left: 315px;
        margin-top: 22px;
      }
    }
  }
}
</style>
